import type VNode from './VNode';
import { setProp } from './setProp';

/**
 * 挂载节点(尾部追加)
 * @param vnode 要创建并挂载的虚拟节点
 * @param container 挂载的容器
 * @param anchor 挂载的锚点节点(默认挂载到容器尾部)
 */
export const mount = function (
  vnode: VNode,
  container: HTMLElement,
  anchor: HTMLElement | null = null
) {
  if (vnode.text !== null) {
    const textNode = document.createTextNode(vnode.text);
    vnode.el = textNode;
    container.insertBefore(textNode, anchor); // anchor 为 null 时，该方法默认挂载到容器尾部
    return;
  }
  const el = document.createElement(vnode.tag);
  vnode.el = el;
  // 属性挂载
  Object.entries(vnode.props).forEach(([key, value]) => {
    setProp(el, key, value);
  });
  // 子节点挂载
  (vnode.children as VNode[]).forEach((child) => {
    mount(child, el);
  });
  // 挂载到容器
  container.insertBefore(el, anchor); // anchor 为 null 时，该方法默认挂载到容器尾部
};
